// 源插件
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';
// 视图插件
import { Button, Card, Form, message, notification, Checkbox } from 'antd';
// 引入编辑器组件
import BraftEditor from 'braft-editor';
import Table from 'braft-extensions/dist/table';
// 引入编辑器样式
import 'braft-editor/dist/index.css';
import 'braft-extensions/dist/table.css';
// 外部组件
// css OR less预编译器

import styles from './All.less';
// 图片
/**
 *  Describe:数据连接
 *  Created by xjc on 2019/5/15
 */
const options = {
  defaultColumns: 3, // 默认列数
  defaultRows: 3, // 默认行数
  withDropdown: true, // 插入表格前是否弹出下拉菜单
  exportAttrString: '', // 指定输出HTML时附加到table标签上的属性字符串
  includeEditors: ['editor-id-1'], // 指定该模块对哪些BraftEditor生效，不传此属性则对所有BraftEditor有效
  excludeEditors: ['editor-id-2'], // 指定该模块对哪些BraftEditor无效
};
BraftEditor.use(Table());
function getNowFormatDate() {
  const date = new Date();
  const seperator1 = '/';
  const year = date.getFullYear();
  let month = date.getMonth() + 1;
  let strDate = date.getDate();
  if (month >= 1 && month <= 9) {
    month = `0${month}`;
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = `0${strDate}`;
  }
  const currentdate = year + seperator1 + month + seperator1 + strDate;
  return currentdate;
}
const nowDate = getNowFormatDate();
const tableStr2 =
  `${'<table><tbody>' +
    '<tr><td style="text-align:center;" colspan="10" rowspan="1">'}${nowDate} RCN票据报价</td></tr><tr><td style="text-align:center;" colspan="1" rowspan="2">Tenor</td><td style="text-align:center;" colspan="1" rowspan="2">Strike</td><td style="text-align:center;" colspan="1" rowspan="2">Yield</td><td style="text-align:center;" colspan="1" rowspan="2">Observation Frequency</td><td style="text-align:center;" colspan="1" rowspan="2">KO Price</td>` +
  `<td style="text-align:center;" colspan="1" rowspan="2">KI</td><td style="text-align:center;" colspan="1" rowspan="2">Currency</td><td style="text-align:center;" colspan="3" rowspan="1">Underlying</td></tr><tr><td style="text-align:right;" colspan="1" rowspan="1">1</td><td style="text-align:right;" colspan="1" rowspan="1">2</td><td style="text-align:right;" colspan="1" rowspan="1">3</td></tr>` +
  `<tr><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td></tr>` +
  `<tr><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td></tr>` +
  `<tr><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td></tr>` +
  `<tr><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td></tr>` +
  `<tr><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td></tr>` +
  `</tbody></table><br/>` +
  `<table><tbody>` +
  `<tr><td style="text-align:center;" colspan="10" rowspan="1">${nowDate} BULLET票据报价</td></tr><tr><td style="text-align:center;" colspan="1" rowspan="2">Tenor</td><td style="text-align:center;" colspan="1" rowspan="2">Strike</td><td style="text-align:center;" colspan="1" rowspan="2">Yield</td><td style="text-align:center;" colspan="1" rowspan="2">Observation Frequency</td><td style="text-align:center;" colspan="1" rowspan="2">KO Price</td>` +
  `<td style="text-align:center;" colspan="1" rowspan="2">KI</td><td style="text-align:center;" colspan="1" rowspan="2">Currency</td><td style="text-align:center;" colspan="3" rowspan="1">Underlying</td></tr><tr><td style="text-align:right;" colspan="1" rowspan="1">1</td><td style="text-align:right;" colspan="1" rowspan="1">2</td><td style="text-align:right;" colspan="1" rowspan="1">3</td></tr>` +
  `<tr><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td></tr>` +
  `<tr><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td></tr>` +
  `<tr><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td></tr>` +
  `<tr><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td></tr>` +
  `<tr><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td></tr>` +
  `</tbody></table><br/>` +
  `<table><tbody>` +
  `<table>
    <tbody>
    <tr>
      <td style="text-align:center;" colSpan="10" rowSpan="1">${nowDate} 红利票据报价</td>
    </tr>
    <tr>
      <td style="text-align:center;" colSpan="1" rowSpan="2">Tenor</td>
      <td style="text-align:center;" colSpan="1" rowSpan="2">Strike</td>
      <td style="text-align:center;" colSpan="1" rowSpan="2">Yield</td>
      <td style="text-align:center;" colSpan="1" rowSpan="2">Coupon Barrier</td>
      <td style="text-align:center;" colSpan="1" rowSpan="2">Upside PR</td>
      <td style="text-align:center;" colSpan="1" rowSpan="2">KI</td>
      <td style="text-align:center;" colSpan="1" rowSpan="2">Currency</td>
      <td style="text-align:center;" colSpan="3" rowSpan="1">Underlying</td>
    </tr>
    <tr>
      <td style="text-align:right;" colSpan="1" rowSpan="1">1</td>
      <td style="text-align:right;" colSpan="1" rowSpan="1">2</td>
      <td style="text-align:right;" colSpan="1" rowSpan="1">3</td>
    </tr>
    <tr>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:right;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:right;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:right;" colSpan="1" rowSpan="1"></td>
    </tr>
    <tr>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:right;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:right;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:right;" colSpan="1" rowSpan="1"></td>
    </tr>
    <tr>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:right;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:right;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:right;" colSpan="1" rowSpan="1"></td>
    </tr>
    <tr>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:right;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:right;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:right;" colSpan="1" rowSpan="1"></td>
    </tr>
    <tr>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:center;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:right;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:right;" colSpan="1" rowSpan="1"></td>
      <td style="text-align:right;" colSpan="1" rowSpan="1"></td>
    </tr>
    </tbody>
  </table><br/>`+
  `<table><tbody><tr><td style="text-align:center;" colspan="3" rowspan="1">${nowDate} Twinwin票据报价</td></tr><tr><td style="text-align:center;" colspan="1" rowspan="2">Tenor</td><td style="text-align:center;" colspan="2" rowspan="1">Underlying</td></tr><tr><td style="text-align:right;" colspan="1" rowspan="1">1</td><td style="text-align:right;" colspan="1" rowspan="1">2</td></tr>` +
  `<tr><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td></tr>` +
  `<tr><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td></tr>` +
  `<tr><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td></tr>` +
  `<tr><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td></tr>` +
  `<tr><td style="text-align:center;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td><td style="text-align:right;" colspan="1" rowspan="1"></td></tr>` +
  `</tbody></table>`;

@connect(({ mail, loading }) => ({
  mail,
  loading: loading.models.mailRule,
}))
@Form.create()
class BraftB extends PureComponent {
  componentWillMount() {}

  state = {
    // 创建一个空的editorState作为初始值ss
    editorState: BraftEditor.createEditorState(tableStr2),
    checkValues: [4, 5, 6, 7],
  };

  componentDidMount() {
    // 假设此处从服务端获取html格式的编辑器内容
    // const htmlContent = await fetchEditorContent();
    // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorStat
    // this.setState({
    //   editorState: BraftEditor.createEditorState(htmlContent)
    // })
  }

  submitContent = async () => {
    // 在编辑器获得焦点时按下ctrl+s会执行此方法
    // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
    const htmlContent = this.state.editorState.toHTML();
    const result = await saveEditorContent(htmlContent);
  };

  handleEditorChange = editorState => {
    this.setState({ editorState });
  };

  preview = () => {
    if (window.previewWindow) {
      window.previewWindow.close();
    }

    window.previewWindow = window.open();
    window.previewWindow.document.write(this.buildPreviewHtml());
    window.previewWindow.document.close();
  };

  buildPreviewHtml() {
    // debugger
    const reg = /<table[^>]*>[\s\S]*?<\/table>/gi;
    const table = this.state.editorState.toHTML().match(reg);
    return `
      <!Doctype html>
      <html><head>
          <title>Preview Content</title>
          <style>
            html,body{
              height: 100%;
              margin: 0;
              padding: 0;
              overflow: auto;
              background-color: #f1f2f3;
            }
            .container{
              box-sizing: border-box;
              width: 1000px;
              max-width: 100%;
              min-height: 100%;
              margin: 0 auto;
              padding: 30px 20px;
              overflow: hidden;
              background-color: #fff;
              border-right: solid 1px #eee;
              border-left: solid 1px #eee;
            }
            .container img,
            .container audio,
            .container video{
              max-width: 100%;
              height: auto;
            }
            .container p{
              white-space: pre-wrap;
              min-height: 1em;
            }
            .container pre{
              padding: 15px;
              background-color: #f1f1f1;
              border-radius: 5px;
            }
            .container blockquote{
              margin: 0;
              padding: 15px;
              background-color: #f1f1f1;
              border-left: 3px solid #d1d1d1;
            }
            table{ 
              border-collapse:collapse;border:none;
           
            }
            table tr td{
              border:solid #333 1px;
              padding:  10px;
              /*text-align: center;*/
            }
          </style>
        </head>
        <body>        
          <div class="container"><p> 帮忙报以下价格:</p><p></p>
          ${
            table ? (
              `${table[0] || ''}<br/>${table[1] || ''}<br/>${table[2] || ''}<br/>${table[3] || ''}`
            ) : (
              <div> </div>
            )
          }
          <p> </p><p></p><hr><p></p><p><span style="color:#0000ff">Best regards</span><br> <br><span style="color:#0000ff"><strong>Sean Huang  黄金海</strong></span><br><span style="color:#0000ff"><strong><span style="background-color:#ffffff">Director of AI Lab</span></strong></span> <span style="color:#0000ff"><strong><span style="background-color:#ffffff">人工智能实验室主任</span></strong></span><br><span style="color:#0000ff">天鸽互动控股有限公司（香港主板上市公司代码：1980）</span><br><span style="color:#1f497d"><a href="https://protect2.fireeye.com/url?k=8afe52ee2cb6a4f4.8afe7b90-fe345c4a455e71b9&amp;u=http://www.tiange.com/">www.tiange.com</a></span><br></p><div class="media-wrap image-wrap"><img border="0" id="_x0000_i1027" src="http://fss.91stock.net/adv/tg.jpg" alt="说明: cid:_Foxmail.0@7B353329-87C6-4067-9DA6-5901E2EDBEC6"></div><p><br><span style="color:#0000ff">地址：杭州市拱墅区银泰城E座12F   邮编：310015</span><br><span style="color:#0000ff">Tel: +[86](571)88108686</span><br><span style="color:#0000ff">Fax: +[86](571)85390396</span><br><span style="color:#0000ff">Mobile: +86-13735837864</span><br><span style="color:#0000ff">Email: huangjinhai@tiange.com</span></p></div>
    </body>
    </html>     
    `;
  }

  commitBraft() {
    const that = this;
    const { fileList } = this.props;
    const formData = new FormData();
    fileList.forEach(file => {
      formData.append('files[]', file);
    });
    const key = `open${Date.now()}`;
    const btn = (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          notification.close(key);
          const { dispatch } = that.props;
          dispatch({
            type: 'mail/SendHtmlWithAtc',
            payload: {
              mailModelTypes: that.state.checkValues,
              // ccs:message.ccs,
              // subject:message.subject,
              // tos:message.tos,
              // mfs:formData,
              // content:btoa(encodeURI(this.buildPreviewHtml ())),
              content: this.buildPreviewHtml(),
            },
          });
        }}
      >
        确定
      </Button>
    );
    notification.open({
      message: 'Notification Title',
      description: '是否发送邮件',
      btn,
      key,
      onClose: close,
    });
  }

  onChangeBox(checkedValues) {
    this.setState({
      checkValues: checkedValues,
    });
  }

  render() {
    const extendControls = [
      {
        key: 'custom-button',
        type: 'button',
        text: '预览',
        onClick: this.preview,
      },
    ];
    const options = [
      { label: '瑞银', value: 4 },
      { label: '中银', value: 5 },
      { label: '花旗', value: 6 },
      { label: '摩根斯坦利', value: 7 },
    ];
    const { editorState } = this.state;
    return (
      <div>
        <Checkbox.Group
          options={options}
          defaultValue={[4, 5, 6, 7]}
          onChange={this.onChangeBox.bind(this)}
        />
        <br />
        <br />
        <div className={styles['embed-editor']}>
          <BraftEditor
            value={editorState}
            // excludeControls={excludeControls}
            extendControls={extendControls}
            onChange={this.handleEditorChange}
            onSave={this.submitContent}
            contentStyle={{ height: 636 }}
          />
        </div>
        <br />
        <Button size="large" type="primary" onClick={this.commitBraft.bind(this)}>
          提交
        </Button>
        {/* <div className={styles['tableList']}> */}
        {/* <table> */}
        {/* <tr> */}
        {/* <td>姓名：</td> */}
        {/* <td contentEditable="true"></td> */}
        {/* </tr> */}
        {/* <tr> */}
        {/* <td>密码：</td> */}
        {/* <td contentEditable="true"></td> */}
        {/* </tr> */}
        {/* </table> */}
        {/* </div> */}
      </div>
    );
  }

  componentDidCatch(error, info) {
    // 只能抓掉异常了
    this.forceUpdate();
  }

  componentWillUnmount() {}
}

export default BraftB;
